<template>
<!-- dialog-workorder-deal begin -->
<el-dialog
  width="460px"
  class="dialog-workorder-deal"
  title="工单处理"
  :append-to-body="true"
  :close-on-click-modal="false"
  :visible.sync="dialogShow"
  @close="onHide()">
  <el-form
    ref="dialogForm"
    class="dialogForm"
    label-width="82px"
    size="small"
    :rules="rules"
    :model="dialogForm">
    <el-form-item label="工单状态" prop="orderStatus">
      <dg-dict-select
        dictType="ali_work_order_status"
        v-model="dialogForm.orderStatus"
        clearable
        placeholder="请选择工单状态" />
    </el-form-item>
    <el-form-item label="工单动作" prop="orderAction">
      <dg-dict-select
        dictType="ali_work_order_deal_status"
        v-model="dialogForm.orderAction"
        clearable
        placeholder="请选择工单动作" />
    </el-form-item>
    <el-form-item label="处理动作" prop="workOrderDetain">
      <dg-dict-select
        dictType="ali_work_order_deal_type"
        v-model="dialogForm.workOrderDetain"
        clearable
        placeholder="请选择处理动作" />
    </el-form-item>
    <el-form-item label="跟进内容" prop="followUpContent">
      <el-input type="textarea" v-model.trim="dialogForm.followUpContent" placeholder="请输入跟进内容" clearable></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button size="small" type="primary" :loading="dialogLoading" @click="dialogSubmit()">保 存</el-button>
    <el-button size="small" @click="dialogShow = false">取 消</el-button>
  </div>
</el-dialog>
<!-- dialog-workorder-deal end -->
</template>

<script>
import * as API_WorkTrack from '@/api/aliorder/worktrack';

export default {
  name: 'dialog-workorder-deal',
  props: {
    // 弹层显示
    show: {
      type: Boolean,
      default: false
    },
    // 弹层状态
    status: {
      type: String,
      default: 'new'
    },
    // 工单 ID
    id: {
      type: [String, Number],
      default: undefined
    }
  },
  data () {
    return {
      dialogShow: false,
      dialogForm: {
        orderStatus: undefined,
        orderAction: undefined,
        workOrderDetain: undefined,
        followUpContent: undefined
      },
      rules: {
        orderStatus: [
          { required: true, message: '请选择工单状态', trigger: 'change' }
        ],
        orderAction: [
          { required: true, message: '请选择工单动作', trigger: 'change' }
        ],
        workOrderDetain: [
          { required: true, message: '请选择工单动作', trigger: 'change' }
        ],
        followUpContent: [
          { required: true, message: '请输入跟进内容', trigger: 'blur' }
        ]
      },
      // 弹层按钮加载中
      dialogLoading: false
    };
  },
  watch: {
    show (_newVal) {
      this.resetForm('dialogForm');
      this.dialogShow = _newVal;
    }
  },
  methods: {
    /**
      * @date 2025/07/10
      * @author wolfMan
      * @description {关闭弹层}
    */
    onHide () {
      this.$emit('update:show', false);
    },
    /**
      * @date 2025/07/10
      * @author wolfMan
      * @description {信息弹层表单提交}
    */
    dialogSubmit () {
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          this.dialogLoading = true;
          let _params = this.MixinClone(this.dialogForm);
          _params.workOrderId = this.id;
          API_WorkTrack.addService(_params).then(response => {
            this.$msgSuccess(response.msg);
            this.$emit('refresh');
            this.onHide();
          }).always(() => {
            this.dialogLoading = false;
          });
        } else {
          console.log('error submit!!');
          return false;
        };
      });
    }
  }
};
</script>